<template>
  <div class="main">
    <el-row>
      <el-form
        :inline="true"
        label-width="80px"
        style="margin-top:20px;"
        labelPosition="left"
        :model="search"
      >
        <el-row type="flex" justify="space-around">
          <el-col :span="9">
            <el-form-item label="排期日期">
              <el-date-picker
                style="width:300px"
                type="daterange"
                v-model="search.scheduleTime"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="广告主">
              <el-input v-model="search.mediaUp" placeholder="请输入合同号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" size="small" icon="el-icon-SEARCH" @click="searchContract">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-row>
        <el-table
          ref="multipleTable"
          border
          :data="contractList"
          row-key="id"
          tooltip-effect="dark"
          style="width: 100%"
          :cell-style="$rowstyle"
          :header-cell-style="$headerstyle"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" :reserve-selection="true" align="center" width="55"></el-table-column>
          <el-table-column label="合同号" align="center" width="100">
            <template slot-scope="scope">{{ scope.row.code }}</template>
          </el-table-column>
          <el-table-column label="合同名称" align="center">
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>
          <el-table-column label="周期" align="center">
            <template
              slot-scope="scope"
            >{{transDate(JSON.parse(scope.row.cycle).start_time)+'~'+transDate(JSON.parse(scope.row.cycle).end_time)}}</template>
          </el-table-column>
          <el-table-column label="广告主" align="center">
            <template slot-scope="scope">{{ scope.row.get_media_up.name }}</template>
          </el-table-column>
          <el-table-column label="合同金额（万元）" align="center">
            <template slot-scope="scope">{{ scope.row.money }}</template>
          </el-table-column>

          <el-table-column label="制作时间" align="center">
            <template slot-scope="scope">{{ transDate(scope.row.created_at) }}</template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
          :current-page.sync="page"
          :page-size="4"
          layout="prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-row>
      <el-row>
        <div class="checkBoxContanier">
          <el-checkbox v-model="checked">包含不可用资源</el-checkbox>
        </div>
      </el-row>
      <el-row style="margin-top:20px;">
        <div class="checkBoxContanier">
          <el-button type="primary" size="small" @click="makeSchduleClick">制作排期</el-button>
        </div>
      </el-row>
    </el-row>

    <el-dialog title="新建排期" :visible.sync="showMakeSchdule" destroy-on-close append-to-body center width="60%">
      <makeSchdule :time='search.scheduleTime' @postSucess='postSucess' :ids='checkedList' @closeMake='closeMake' :list="checkedList"></makeSchdule>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
import {
  SETDATE,
  mediaList,
  Scheduing_list,
  Contract_info_List
} from "../../../api/Salesman.js";
import makeSchdule from "./makeSchdule.vue";
export default {
  components: {
    makeSchdule
  },
  data() {
    return {
      search: {
        scheduleTime: "",
        mediaUp: ""
      },
      page: 1,
      total: 0,
      contractList: [],
      checked: true,
      checkedList: [],
      showMakeSchdule: false,
      time:""
    };
  },
  methods: {
    closeMake(){
      this.showMakeSchdule = false
    },
    isEmpty(obj) {
      if (typeof obj == "undefined" || obj == null || obj == "") {
        return true;
      } else {
        return false;
      }
    },
    transDate(time) {
      return moment.unix(time).format("YYYY-MM-DD");
    },
    searchContract() {
      this.getContractList();
    },
    getContractList() {
      let params = {
        name: this.search.mediaUp,
        start_time: this.isEmpty(this.search.scheduleTime)
          ? ""
          : moment(this.search.scheduleTime[0]).unix(),
        end_time: this.isEmpty(this.search.scheduleTime)
          ? ""
          : moment(this.search.scheduleTime[1]).unix(),
        per: 4,
        page: this.page
      };

      Scheduing_list(params).then(res => {
        if (res.code == 200) {
          this.page = res.data.current_page;
          this.total = res.data.total;
          this.contractList = res.data.data;
          this.contractList.forEach(element => {
            element.created_at = SETDATE(element.created_at, true);
            element.cycle = JSON.parse(element.cycle);
            for (const key in element.cycle) {
              if (element.cycle.hasOwnProperty(key)) {
                const el = element.cycle[key];
                element.cycle[key] = SETDATE(el, true);
              }
            }
          });
        }
      });
    },
    handleSizeChange() {},
    handleSelectionChange(row) {
      this.checkedList = row;
    },
    handlePageChange() {
      this.getContractList();
    },
    makeSchduleClick() {
     if (this.checkedList.length < 1) {
        this.$message.error("请勾选合同");
      }else if (this.search.scheduleTime == '') {
        this.$message.error("请选择时间");
      } else {
        this.showMakeSchdule = true;
      }
    },
    postSucess(){
      this.showMakeSchdule = false
      this.$emit('postSucess')
    }
  },
  computed:{
    changeTime(){
      return this.time
    },
    changeName(){
      return this.search.mediaUp
    }
  },
  watch:{
    changeTime:function(n,o){
      this.time =  n
    },
    changeName:function(val){
      this.getContractList()
    }
  },
  mounted() {
    this.getContractList();
  }
};
</script>

<style lang='scss' scoped>
.main {
  width: 100%;
  height: 100%;
}
.checkBoxContanier {
  width: 100%;
  text-align: center;
}
</style>